<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="item in nav"
        :key="item.name"
        :class="[item.name,item.acitve?'s-nav-active':'']"
        @click="navSelect"
      >{{ item.txt }}</dd>
    </dl>
    <ul>
      <Item v-for="(item,idx) in shopList" :key="idx" :meta="item" />
    </ul>
  </div>
</template>

<script>
import Item from "./product.vue";
import * as homeApi from "@/server/home.js";
export default {
  components: {
    Item
  },
  data() {
    return {
      shopList: null,
      page: 1,
      size: 5,
      kind: "",
      params: {
        type: "",
        price: "",
        price2: ""
      },
      nav: [
        {
          name: "s-default",
          txt: "智能排序",
          acitve: true
        },
        {
          name: "s-price",
          txt: "价格最低",
          active: false
        },
        {
          name: "s-visit",
          txt: "人气最高",
          active: false
        },
        {
          name: "s-comment",
          txt: "评价最高",
          active: false
        }
      ]
    };
  },
  methods: {
    navSelect: function() {
      console.log("select");
    },
    getDefaultShopList: function() {
      homeApi
        .getShopList(this.kind, this.page, this.size, this.params)
        .then(res => {
          this.shopList = res.data.data.list;
          this.total = res.data.data.total;
          console.log(this.total);
          this.$emit('func',this.total);
        });
    },
    getShopList: function(price1, price2) {
      this.params.price = price1;
      this.params.price2 = price2;
      this.getDefaultShopList();
    }
  },
  mounted() {
    this.kind = this.$route.query.category;
    this.getDefaultShopList();
  }
};
</script>
